<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>View Feedback</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .feedback-item {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>View Feedback</h2>
        <div id="feedback-list"></div>
    </div>

    <script type="module">
        const feedbackList = document.getElementById('feedback-list');

        // Fetch feedback from server
        async function fetchFeedback() {
            try {
                const response = await fetch('/feedback');
                const feedbackData = await response.json();
                if (response.ok) {
                    feedbackData.forEach(feedback => {
                        const feedbackItem = document.createElement('div');
                        feedbackItem.classList.add('feedback-item');
                        feedbackItem.innerHTML = `
                            <h3>${feedback.homework_name}</h3>
                            <p>Score: ${feedback.score}</p>
                            <p>Teacher's Comment: ${feedback.comment}</p>
                        `;
                        feedbackList.appendChild(feedbackItem);
                    });
                } else {
                    console.error('Failed to fetch feedback');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('An error occurred while fetching feedback.');
            }
        }

        fetchFeedback();
    </script>
</body>
</html>